<template>
	<view class="preview-page">
		<view class="nuter">
			<view :class="target==0?'active':''" @click="setIndex" data-index="0"></view>
			<view :class="target==1?'active':''" @click="setIndex" data-index="1"></view>
			<view :class="target==2?'active':''" @click="setIndex" data-index="2"></view>
		</view>
		<swiper 
			:duration="500" 
			:current="thisindex"  
			:data-index='thisindex' 
			@change="toggle"
			circular
		>
			<swiper-item>
				1111111
			</swiper-item>
			<swiper-item>
				2222222
			</swiper-item>
			<swiper-item>
				3333333
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				target:0,
				thisindex:0
			}
		},
		methods: {
			toggle(e){
				let index = e.detail.current
				this.target = index
			},
			setIndex(e){
				let index = e.currentTarget.dataset.index
				this.thisindex = index
			}
		}
	}
</script>
